const app = getApp();
Page({
  onReady: function() {
    this.animation = wx.createAnimation()
  },
  rotate: function() {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  scale: function() {
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  translate: function() {
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  skew: function() {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  rotateAndScale: function() {
    this.animation.rotate(Math.random() * 720 - 360)
      .scale(Math.random() * 2)
      .step()
    this.setData({
      animation: this.animation.export()
    })
  },
  rotateThenScale: function() {
    this.animation.rotate(Math.random() * 720 - 360).step()
      .scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  all: function() {
    this.animation.rotate(Math.random() * 720 - 360)
      .scale(Math.random() * 2)
      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
      .skew(Math.random() * 90, Math.random() * 90)
      .step()
    this.setData({
      animation: this.animation.export()
    })
  },
  allInQueue: function() {
    this.animation.rotate(Math.random() * 720 - 360).step()
      .scale(Math.random() * 2).step()
      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
      .skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  reset: function() {
    this.animation.rotate(0, 0)
      .scale(1)
      .translate(0, 0)
      .skew(0, 0)
      .step({
        duration: 0
      })
    this.setData({
      animation: this.animation.export()
    })
  },
  // 页面展示时，触发动画
  onShow: function() {
    app.sliderightshow(this, 'myAnimation', -200, 1)

    setTimeout(function() {
      app.show(this, 'myAnimation', 1)
    }.bind(this), 200);
  },
  //页面隐藏时，触发渐出动画
  onHide: function() {
    //你可以看到，动画参数的200,0与渐入时的-200,1刚好是相反的，其实也就做到了页面还原的作用，使页面重新打开时重新展示动画
    app.sliderightshow(this, 'myAnimation', 200, 0)
    //延时展现容器2，做到瀑布流的效果，见上面预览图
    // setTimeout(function() {
    //   app.slideupshow(this, 'myAnimation', 200, 0)
    // }.bind(this), 200);
  },
   
  myShow: function() {
    this.onShow();
  },
  myHide: function () {
    this.onHide();
  }
})